<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-7ymO4nGrkm372HoSbq1OY2DP4pEZnMiA+E0F3zPr+JQQtQ82gQ1HPY3QIVtztVua" crossorigin="anonymous"></script>
    <title>商品管理</title>
</head>
<body>
    <form>
        <div class="form-row align-items-center">
            <div class="col-sm-2 my-1">
                <label class="sr-only" for="id">商品id</label>
                <input type="text" class="form-control" id="id" name="id" placeholder="商品id">
            </div>
            <div class="col-sm-2 my-1">
                <label class="sr-only" for="id">商品名称</label>
                <div class="input-group">
                    <input type="text" class="form-control" id="name" name="name" placeholder="商品名称">
                </div>
            </div>
            <div class="col-sm-1 my-1">
                <label class="sr-only" for="id">价格起</label>
                <div class="input-group">
                    <input type="text" class="form-control" id="minPrice" name="minPrice" placeholder="价格起">
                </div>
            </div>
            <div class="col-sm-1 my-1">
                <label class="sr-only" for="id">价格终</label>
                <div class="input-group">
                    <input type="text" class="form-control" id="maxPrice" name="maxPrice" placeholder="价格终">
                </div>
            </div>
            <div class="col-sm-1 my-1">
                <div class="form-check">
                    <input class="form-check-input" type="radio" id="asc" name="order" value="asc" checked>
                    <label class="form-check-label" for="asc">
                        价格从小到大
                    </label>
                </div>
            </div>
            <div class="col-sm-1 my-1">
                <div class="form-check">
                    <input class="form-check-input" type="radio" id="desc" value="desc" name="order">
                    <label class="form-check-label" for="desc">
                        价格从大到小
                    </label>
                </div>
            </div>
            <div class="col-auto my-1">
                <button type="submit" class="btn btn-primary">搜索</button>
            </div>
        </div>
    </form>
    <table class="table table-striped">
        <thead>
            <tr>
                <th scope="col">ID</th>
                <th scope="col">名称</th>
                <th scope="col">价格</th>
                <th scope="col">图片</th>
                <th scope="col">库存</th>
                <th scope="col">操作</th>
            </tr>
        </thead>
        <tbody>
            <tr th:each="goods : ${goodsList}">
                <td th:text="${goods.id}">1</td>
                <td th:text="${goods.name}">可口可乐</td>
                <td th:text="${goods.price}">3</td>
                <td><img th:src="${goods.imgsrc}" src="" alt="" srcset="" width="50"></td>
                <td th:text="${goods.num}">1</td>
                <td>
                    <a href="" class="btn btn-info">修改</a>
                    <a href="" class="btn btn-danger">修改</a>
                </td>
            </tr>
        </tbody>
    </table>
</body>
</html>